<template>
  <view class="dy-scroll-container" style="background: #f5f5f5;">
    <dy-navbar>
      个人中心
    </dy-navbar>
    <scroll-view scroll-y class="dy-scroll">
      <view class="header">
        <view
          class="dy-abso-left-center dy-align-center dy-pd-32"
          style="transform: translateY(-80%);"
        >
          <dy-img
            width="106rpx"
            height="106rpx"
            :src="userInfo.avatar"
            class="dy-avatar dy-bg-fifth"
            shape="round"
          />
          <view class=" dy-flex-sub dy-white dy-mg-left-12">
            <view class="dy-fz-36 dy-fw-500 dy-mg-top-6">
              昵称
            </view>
            <view class="dy-mg-top-6">
              身份
            </view>
          </view>
        </view>
      </view>
      <dy-card style="margin-top: -80rpx;">
        <view slot="body" class="dy-align-center">
          <view class="dy-flex-sub dy-text-center">
            <view class="dy-fz-40">￥12</view>
            <view class="dy-fz-28 dy-mg-top-12" :style="{ color: '#999999' }">余额</view>
          </view>
          <view :style="{ width: '1rpx', height: '97rpx', background: '#D8D8D8' }" />
          <view class="dy-flex-sub dy-text-center">
            <view class="dy-fz-40">120</view>
            <view class="dy-fz-28 dy-mg-top-12" :style="{ color: '#999999' }">积分</view>
          </view>
        </view>
      </dy-card>

      <dy-card padding="0">
        <view slot="body">
          <dy-list>
            <dy-list-item title="订单记录">
              <dy-icon slot="left" name="order1" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="我的">
              <dy-icon slot="left" name="mine" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="个人信息">
              <dy-icon slot="left" name="form" size="50" custom-class="dy-primary" />
            </dy-list-item>
            <dy-list-item title="系统设置">
              <dy-icon slot="left" name="setup-fill" size="50" custom-class="dy-primary" />
            </dy-list-item>
          </dy-list>
        </view>
      </dy-card>
    </scroll-view>
    <dy-bottom-bar border-top="none">
      <dy-button
        custom-class="dy-fz-28 dy-fw-400 "
        type="secondary"
        size="large"
        width="100%"
        round
      >
        退出登录
      </dy-button>
    </dy-bottom-bar>
  </view>
</template>

<script>
const TAG_NAME = 'Profile'

export default {
  name: TAG_NAME,
  data() {
    return {
      userInfo: {
        avatar: '#'
      }
    }
  },

  async onShow() {
    // 因为授权调用了uni.hideTabBar()，防止用户授权时候关闭小程序，下一次进入就不会显示tabbar了
    uni.showTabBar()
  },
  methods: {
    handleMenuClick(path) {
      if (!path) return
      this.$dy.navi.navigateTo(path)
    }
  }
}
</script>

<style lang="scss" scoped>
.dy-scroll {
  .header {
    position: relative;
    height: 379rpx;
    background: $dy-primary-color;
  }
}
</style>
